<template>
    <div class="member-detail-right py-10 box-border flex-col flex-between-box flex-1 h-full pr-10 text-16">
        <div class="flex-between-items-box line-bottom py-2">
            <div>
                <el-tag>进行中</el-tag>
                <span class="ml-10">{{ goodDetail.goodsName }}</span>
            </div>
            <div>
                <Icon name="View" class="mr-8 cursor-pointer" :size="16"/>
                <Icon name="Edit" class="mr-8 cursor-pointer" :size="16"/>
            </div>
        </div>
        <div class="flex-between-items-box text-14">
            <div class="w-1/2">
                <div class="mt-12">活动时间：{{ goodDetail.activityTime }}</div>
                <div class="mt-12">创建时间：{{ goodDetail.goodsCreatedTime }}</div>
            </div>
            <div class="salesStock text-14 rounded-14 box-border p-10 flex-col-between-box">
                <span>新客数（人）</span>
                <span>活动目标：{{ goodDetail.goodsStock }}</span>
                <span>完成度：{{ goodDetail.goodsSales }}</span>
            </div>
            <div class="salesStock text-14 rounded-14 box-border p-10 flex-col-between-box">
                <span>GMV （万元）</span>
                <span>活动目标：{{ goodDetail.goodsStock }}</span>
                <span>完成度：{{ goodDetail.goodsSales }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
// import dayjs from 'dayjs'
import Icon from '@/components/Icon/index.vue'
import { GoodDetailData } from '@api/module/goodsCenter'

const props = defineProps({
    goodDetail: {
        type: Object as PropType<GoodDetailData>,
        default: () => ({})
    }
})

const emit = defineEmits(['updateGoodList'])

// 删除商品
const confirmDelete = () => {
    console.log('需要删除的id', props.goodDetail.id)
    emit('updateGoodList')
}
</script>

<style lang="less" scoped>
.salesStock{
    width: 130px;
    border: 1px solid #D9D9D9;
    height: 85px;

    i{
        color:red;
        font-style: normal;
    }
}
</style>
